<template>
    <div id="app" class="wrapper-first">
        <section>
            <!-- 横幅广告部分-->
				<div class="banner">
					<div class="banner-lunbo">
						<img class="lunbo-img" v-for="item in imgList" :key="item.id" :src="item.src"
						:style="{ opacity: item.id === currentIndex ? 1 : 0 }" alt="暂无图片" v-show="item.id === currentIndex">
					</div>
					<div class="banner-mengban"></div>
					<ul id="bannerUl">
						<li v-for="(item,index) in  liList" :key="index" @mouseover="showGoods(index)" @mouseout="hideGoods(index)">
							<a>{{ item.name }}</a>
							<i class="fa fa-angle-right"></i>
							<div class="banner-box" :style="{ display: item.showGoods ? 'block' : 'none' }">
								<p v-for="sr in item.product">
									<img :src=sr.src>{{ sr.name }}
								</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="product">
					<ul>
						<li>
							<i class="fa fa-clock-o"></i>
							<span>小米秒杀</span>
						</li>
						<li>
							<i class="fa fa-building-o"></i>
							<span>企业团购</span>
						</li>
						<li>
							<i class="fa fa-road"></i>
							<span>F码通道</span>
						</li>
						<li>
							<i class="fa fa-credit-card"></i>
							<span>米粉卡</span>
						</li>
						<li>
							<i class="fa fa-refresh"></i>
							<span>以旧换新</span>
						</li>
						<li>
							<i class="fa fa-cny"></i>
							<span>话费充值</span>
						</li>
					</ul>
					<div class="product-img">
						<img src="src/assets/img/product1.jpg">
					</div>
					<div class="product-img">
						<img src="src/assets/img/product2.jpg">
					</div>
					<div class="product-img">
						<img src="src/assets/img/product3.jpg">
					</div>
				</div>
        </section>
    </div>
</template>
<script>
    export default{
        data(){
            return {
				currentIndex: 0,
				imgList:[{id:0,src:"src/assets/img/lunbo1.jpg"},{id:1,src:"src/assets/img/lunbo2.jpg"},{id:2,src:"src/assets/img/lunbo3.jpg"},{id:3,src:"src/assets/img/lunbo4.jpg"},{id:4,src:"src/assets/img/lunbo5.jpg"}],
				liList : [
					{
						name:"手机 电话卡",
						showGoods: false,
						product:[
							{name:"小米10 青春版 5G",src:"src/assets/img/xiaomi01.jpg"},
							{name:"小米10 Pro",src:"src/assets/img/xiaomi02.jpg"},
							{name:"小米10",src:"src/assets/img/xiaomi03.jpg"},
							{name:"小米CC9",src:"src/assets/img/xiaomi04.jpg"},
						],
					},
					
{ name:"电视 盒子",showGoods: false,
product:[
							{name:"小米10 青春版 5G",src:"src/assets/img/xiaomi01.jpg"},
				]
  
},
{ name:"笔记本 显示器 平板",showGoods: false,
product:[
							{name:"小米10 Pro",src:"src/assets/img/xiaomi02.jpg"},
				]
},
{ name:"家电 插线板",showGoods: false,
product:[
							{name:"小米CC9",src:"src/assets/img/xiaomi05.jpg"},
				]

  
},
{ name:"出行 穿戴",showGoods: false,
product:[
							{name:"小米CC9E",src:"src/assets/img/xiaomi05.jpg"},
				]
  
},
{ name:"智能 路由器",showGoods: false,
product:[
							{name:"小米CC9 美图定制版",src:"src/assets/img/xiaomi06.jpg"},
				]

  
},
{ name:"电源 配件",showGoods: false,
product:[
							{name:"Redmi 9",src:"src/assets/img/redmi01.jpg"},
				]
  
},
{ name:"健康 儿童",showGoods: false,
product:[
							{name:"Redmi 10X 4G",src:"src/assets/img/redmi02.jpg"},
				]

  
},
{ name:"耳机 音箱",showGoods: false,
product:[
							{name:"Redmi 10X 5G系列",src:"src/assets/img/redmi03.jpg"},
				]

  
},
{ name:"生活 箱包",showGoods: false,
product:[
							{name:"Redmi K30 Pro",src:"src/assets/img/redmi04.jpg"},
				]
  
}
				]
            }
        },
		
        methods:{
			//开启定时器
			startInterval() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.imgList.length - 1) {
          this.currentIndex = 0;
        }
      }, 3000);
    },
			changeInterval(val){
				if(val){
					clearInterval(this.timer)
				}else{
					this.startInterval()
				}
			},
			created(){
				this.startInterval();
			},
			showGoods(index) {
      this.liList[index].showGoods = true;
    },
    hideGoods(index) {
      this.liList[index].showGoods = false;
    },
    goToGoodsPage(product) {
      location.href = 'goods.html'; // 这里可以根据产品跳转逻辑进行修改
    }
        },
		mounted(){
			this.startInterval()
		},
    }
</script>
<style>
@import url('../assets/css/base.css');
</style>